<script setup lang="ts">
import { useDisposalRecords } from './DisposalRecords.script'
import PageContainer from '@/components/PageContainer.vue'
import SearchForm from '@/components/SearchForm.vue'
import StatCard from '@/components/StatCard.vue'
import DataTable from '@/components/DataTable.vue'
import { formatDateTime } from '@/utils'
import { Download, Search, Refresh, Edit, Delete } from '@element-plus/icons-vue'

const {
  loading,
  exporting,
  searchForm,
  pagination,
  disposalStats,
  disposalList,
  getWasteTypeTag,
  getWasteTypeText,
  loadDisposalRecords,
  handleSearch,
  handleReset,
  handlePageChange,
  handleSizeChange,
  handleExport,
  handleEdit,
  handleDelete
} = useDisposalRecords()

const EditIcon = Edit
const DeleteIcon = Delete
</script>

<template>
  <PageContainer title="投放记录">
    <template #actions>
      <el-button @click="handleExport" :loading="exporting">
        <el-icon><Download /></el-icon>
        批量导出
      </el-button>
    </template>

    <!-- 统计卡片 -->
    <div class="stat-cards">
      <StatCard
        label="总投放记录"
        :value="disposalStats.totalRecords"
        icon="document"
        color="#409EFF"
      />
      <StatCard
        label="总投放重量(kg)"
        :value="disposalStats.totalWeight"
        icon="scale"
        color="#67C23A"
        suffix="kg"
      />
      <StatCard
        label="总投放金额(元)"
        :value="disposalStats.totalAmount"
        icon="money"
        color="#E6A23C"
        prefix="¥"
      />
      <StatCard
        label="今日投放记录"
        :value="disposalStats.todayRecords"
        icon="calendar"
        color="#F56C6C"
      />
    </div>

    <!-- 搜索表单 -->
    <SearchForm :model-value="searchForm" @search="handleSearch" @reset="handleReset">
      <el-form-item label="设备编号">
        <el-input v-model="searchForm.deviceCode" placeholder="请输入设备编号" clearable />
      </el-form-item>
      <el-form-item label="用户手机号">
        <el-input v-model="searchForm.userPhone" placeholder="请输入用户手机号" clearable />
      </el-form-item>
      <el-form-item label="设备位置">
        <el-input v-model="searchForm.deviceLocation" placeholder="请输入设备位置" clearable />
      </el-form-item>
      <el-form-item label="回收类型">
        <el-select v-model="searchForm.wasteType" placeholder="请选择回收类型" clearable>
          <el-option label="纸壳类" value="paper" />
          <el-option label="织物类" value="textile" />
          <el-option label="混合类" value="mixed" />
        </el-select>
      </el-form-item>
      <el-form-item label="投放时间">
        <el-date-picker
          v-model="searchForm.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
    </SearchForm>

    <!-- 数据表格 -->
    <DataTable
      :data="disposalList"
      :loading="loading"
      :pagination="pagination"
      @page-change="handlePageChange"
      @size-change="handleSizeChange"
    >
      <el-table-column prop="deviceCode" label="设备编号" min-width="120" />
      <el-table-column prop="wasteType" label="回收类型" min-width="100">
        <template #default="{ row }">
          <el-tag :type="getWasteTypeTag(row.wasteType)" effect="plain">
            {{ getWasteTypeText(row.wasteType) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="deviceLocation" label="设备位置" min-width="150" show-overflow-tooltip />
      <el-table-column prop="userPhone" label="用户手机号" min-width="130" />
      <el-table-column prop="disposalWeight" label="投放重量(kg)" min-width="110" align="right">
        <template #default="{ row }">
          {{ row.disposalWeight.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="disposalAmount" label="金额(元)" min-width="100" align="right">
        <template #default="{ row }">
          ¥{{ row.disposalAmount.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="disposalPhoto" label="照片" min-width="100">
        <template #default="{ row }">
          <el-image
            v-if="row.disposalPhoto"
            :src="row.disposalPhoto"
            :preview-src-list="[row.disposalPhoto]"
            fit="cover"
            style="width: 60px; height: 60px; border-radius: 4px;"
          >
            <template #error>
              <div class="image-error">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
          <span v-else class="text-gray">无照片</span>
        </template>
      </el-table-column>
      <el-table-column prop="disposalTime" label="投放时间" min-width="160">
        <template #default="{ row }">
          {{ formatDateTime(row.disposalTime) }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="80" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleEdit(row)" :icon="EditIcon" title="编辑" />
          <el-button type="danger" link @click="handleDelete(row)" :icon="DeleteIcon" title="删除" />
        </template>
      </el-table-column>
    </DataTable>
  </PageContainer>
</template>

<style lang="scss" scoped>
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.image-error {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  border-radius: 4px;
  color: #c0c4cc;
}

.text-gray {
  color: #909399;
  font-size: 12px;
}
</style>
